<template>
	<view>
		<u-sticky offsetTop="0" customNavHeight="0">
			<navbar :tip="tip" title=" " :isback="true"></navbar>
		</u-sticky>
		<view class="con">
			<u-swiper :list="list1" height="326.34rpx" radius='38rpx' bgColor="#D3D0D0"></u-swiper>
			<view class="box1">
				<view class="box1__title1">
					{{info.title}}
				</view>
				<view class="u-flex u-flex-y-center u-flex-wrap" style="margin-bottom: 49rpx;">
					<view class="box1__sx" :class="curtab==index?'active':''" v-for="(item,index) in tablist"
						:key="index" @click="curtab=index">
						{{item.name}}
					</view>
				</view>
				<view class="box1__title">
					<view class="box1__title__line">

					</view>
					专业介绍
				</view>
				<view class="box1__b1 boxs">
					<u-read-more ref="uReadMore" showHeight='200rpx' textIndent='0' openText=' ' closeText=' ' :toggle='true'
						:shadowStyle='shadowStyle'>
						<view class="" style="padding: 11rpx 13rpx 11rpx;">
							<u-parse :tagStyle="style" :content="info.major"></u-parse>
						</view>
					</u-read-more>
				</view>	
				<view class="box1__title">
					<view class="box1__title__line">

					</view>
					学习课程
				</view>
				<view class="box1__b1 boxs">
					<u-read-more ref="uReadMore1" showHeight='200rpx' textIndent='0' openText=' ' closeText=' ' :toggle='true'
						:shadowStyle='shadowStyle'>
						<view class="" style="padding: 11rpx 13rpx 11rpx;">
							<u-parse :tagStyle="style" :content="info.courses"></u-parse>
						</view>
					</u-read-more>
				</view>
				<view class="box1__title">
					<view class="box1__title__line">
				
					</view>
					升学方向
				</view>
				<view class="box1__b1 boxs">
					<u-read-more ref="uReadMore2" showHeight='200rpx' textIndent='0' openText=' ' closeText=' ' :toggle='true'
						:shadowStyle='shadowStyle'>
						<view class="" style="padding: 11rpx 13rpx 11rpx;">
							<u-parse :tagStyle="style" :content="info.obtain"></u-parse>
						</view>
					</u-read-more>
				</view>
				<view class="box1__title">
					<view class="box1__title__line">
				
					</view>
					就业方向
				</view>
				<view class="box1__b1 boxs">
					<u-read-more ref="uReadMore3" showHeight='200rpx' textIndent='0' openText=' ' closeText=' ' :toggle='true'
						:shadowStyle='shadowStyle'>
						<view class="" style="padding: 11rpx 13rpx 11rpx;">
							<u-parse :tagStyle="style" :content="info.further"></u-parse>
						</view>
					</u-read-more>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="fx" @click="navto('/pages/cschool/collect')">
				<image src="/static/school/Vector@2x(1).png" class="fx__icon" mode=""></image>
				分享
			</view>
		</view>
	</view>
</template>

<script>
	import school from '@/api/_school.js'
	export default {
		data() {
			return {
				tip: '',
				list1: [],
				zylist: [{
					name: '三二分段',
				}, {
					name: '中职',
				}],
				tablist: [{
						name: '中考资讯'
					},
					{
						name: '择校需知'
					},
					{
						name: '择校需知'
					},
					{
						name: '择校需知'
					},
				],
				curtab: 0,
				cur: 0,
				shadowStyle: {
					background: "linear-gradient( 160deg, #FFFBFB 0%, #B1CDFF 100%)",
				},
				id:'',
				info:{},
				style:{
					span:'font-size: 23rpx!important;color: #292929!important;line-height: 28rpx;!important',
					p:'font-size: 23rpx!important;color: #292929!important;line-height: 28rpx;!important'
				}
			};
		},
		methods:{
			async getinfo(){
				let res = await school.majorinfo({id:this.id})
				if(res.data.code==200){
					this.info=res.data.data
					this.info.images.split(',').map(t=>{
						this.list1.push(this.URL(t))
					})
				}
				this.$nextTick(() => {
					this.$refs.uReadMore.init();
					this.$refs.uReadMore1.init();
					this.$refs.uReadMore2.init();
					this.$refs.uReadMore3.init();
				})
			}
		},
		onLoad(o){
			this.id=o.id
			this.getinfo()
		}
	}
</script>

<style lang="scss">
	page {
		background: url('https://mp-b54a63ff-3ce2-4df8-8d6e-f855d8976d34.cdn.bspapp.com/img/Rectangle_3124.png') 750rpx 100% no-repeat;
		background-position: top;
		width: 750rpx;
	}

	.con {
		padding: 0 24rpx;
	}

	.mb0 {
		margin-bottom: 0 !important;
	}

	.box1 {
		background: #FFFFFF;
		border-radius: 38rpx 38rpx 0 0;
		padding: 30rpx 22rpx 22rpx;
		margin-top: 20rpx;
		&__title1{
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 34rpx;
			color: #292929;
			line-height: 61rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin-bottom: 28rpx;
		}
		&__text{
			width: 635rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 19rpx;
			color: #636363;
			line-height: 27rpx;
			margin-left: 15rpx;
			
		}
		&__sx {
			padding: 0 15rpx;
			height: 34rpx;
			background: #FFFFFF;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			border: 2rpx solid #93B8F9;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 23rpx;
			color: #93B8F9;
			line-height: 40rpx;
			margin-right: 10rpx;
		}

		.active {
			height: 38rpx;
			background: #84B1FF;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			color: #fff;
			font-size: 23rpx;
		}

		&__title {
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 31rpx;
			color: #292929;
			line-height: 61rpx;
			margin-bottom: 9rpx;

			&__line {
				height: 61rpx;
				width: 15rpx;
				background-color: #B1CDFF;
				margin-right: 15rpx;
				margin-left: 6rpx;
			}
		}

		&__b {
			border-radius: 38rpx;
			padding: 28rpx 50rpx 28rpx 0;
			display: flex;
			margin-bottom: 22rpx;

			&__l {
				width: 187rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				&__text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 27rpx;
					line-height: 40rpx;
					color: #636363;
					margin-bottom: 50rpx;
					position: relative;
				}

				&__active {
					color: #292929;
				}

				&__line {
					width: 100%;
					height: 15rpx;
					border-radius: 13rpx 13rpx 13rpx 13rpx;
					background-color: #CFEAFF;
					position: absolute;
					bottom: -8rpx;
				}
			}

			&__r {
				border-left: 6rpx solid #D7D7D7;
				flex: 1;

				&__item {
					font-family: Alegreya, Alegreya;
					font-weight: 500;
					font-size: 23rpx;
					color: #292929;
					line-height: 40rpx;
					padding: 0 0 0 24rpx;
					margin-bottom: 12rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 40rpx;
				}

				&__icon {
					width: 25rpx;
					height: 19rpx;
				}
			}
		}

		&__b1 {
			border-radius: 38rpx;
			padding: 11rpx 0 0;
			margin-bottom: 22rpx;
			overflow: hidden;
			
		}
		&__pic{
			width: 100%;
			height: 323rpx;
			background: #D9D9D9;
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			margin-bottom: 16rpx;
		}
	}

	.boxs {
		box-shadow: 0rpx 2rpx 8rpx 0rpx #ACCCC5;
	}

	/deep/.u-read-more__toggle {
		
		height: 31px!important;
		margin-top: -19px!important;
		opacity: 0.52!important;
		padding: 0!important;
	}
	.footer{
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;
		display: flex;
		flex-direction: column;
		&__pic{
			width: 91.6rpx;
			height: 91.6rpx;
			margin-bottom: 9rpx;
		}
	}
	.fx{
		width: 92rpx;
		height: 92rpx;
		background: #3EB8FF;
		border-radius:50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 16rpx;
		color: #FFFFFF;
		&__icon{
			width: 34rpx;
			height: 27rpx;
			margin-bottom: 6rpx;
		}
	}
</style>